﻿@using MyCompanyName.AbpZeroTemplate.Authorization
@using MyCompanyName.AbpZeroTemplate.Web.TagHelpers
@model Abp.Webhooks.WebhookSubscription

@section Styles
{
    <link rel="stylesheet" abp-href="/view-resources/Areas/AppAreaName/Views/WebhookSubscriptions/Detail.css" asp-append-version="true"/>
    <link rel="stylesheet" abp-href="/view-resources/Areas/AppAreaName/Views/Common/_KeyValueListManager.css" asp-append-version="true"/>

}

@section Scripts
{
    <script>
        var subscriptionData = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model, Newtonsoft.Json.Formatting.Indented));
    </script>
    <script abp-src="/view-resources/Areas/AppAreaName/Views/_Bundles/webhook-subscription-detail.js" asp-append-version="true"></script>
    <script abp-src="/view-resources/Areas/AppAreaName/Views/Common/_KeyValueListManager.js" asp-append-version="true"></script>

}

@{
    var breadcrumbs = new List<BreadcrumbItem>()
    {
        new BreadcrumbItem(Url.Action("Index", "WebhookSubscription", new {Area = "AppAreaName"}), @L("WebhookSubscriptions")),
        new BreadcrumbItem(L("WebhookSubscriptionDetail")),
    };
}

<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <abp-page-subheader title="@L("WebhookSubscriptionDetail")" breadcrumbs="breadcrumbs">
        @if (Model.IsActive)
        {
            <span class="label label-success label-inline">@L("Active")</span>
        }
        else
        {
            <span class="label label-dark label-inline">@L("Disabled")</span>
        }

        @if (IsGranted(AppPermissions.Pages_Administration_WebhookSubscription_Edit) ||
             IsGranted(AppPermissions.Pages_Administration_WebhookSubscription_ChangeActivity))
        {
            <div class="dropdown dropdown-inline ml-2">
                <a href="#" class="btn btn-icon" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    <i class="flaticon-more-1"></i>
                </a>
                <div class="dropdown-menu p-0 m-0 dropdown-menu-md dropdown-menu-right" x-placement="bottom-end" style="position: absolute; transform: translate3d(-211px, 39px, 0px); top: 0px; left: 0px; will-change: transform;">
                    <!--begin::Naviigation-->
                    <ul class="navi">
                        @if (IsGranted(AppPermissions.Pages_Administration_WebhookSubscription_Edit))
                        {
                            <li class="navi-item">
                                <a href="javascript:;" id="subscription-edit-btn" class="navi-link">
                                    <span class="navi-text">@L("EditWebhookSubscription")</span>
                                </a>
                            </li>
                        }

                        @if (IsGranted(AppPermissions.Pages_Administration_WebhookSubscription_ChangeActivity))
                        {
                            <li class="navi-item">
                                <a href="javascript:;" id="activity-toggle-btn" class="navi-link">

                                    @if (Model.IsActive)
                                    {
                                        <span class="navi-text">@L("Disable")</span>
                                    }
                                    else
                                    {
                                        <span class="navi-text">@L("Enable")</span>
                                    }
                                </a>
                            </li>
                        }
                    </ul>
                    <!--end::Naviigation-->
                </div>
            </div>
        }
    </abp-page-subheader>

    <div class="@(await GetContainerClass())">
        <div class="card card-custom gutter-b" id="portlet-detail">
                       <div class="card-body">
                           <div class="form-group row">
                               <label class="col-2 col-form-label">@L("WebhookEndpoint")</label>
                               <div class="col-10 text-break">
                                   @Model.WebhookUri
                               </div>
                           </div>
                           <div class="form-group row">
                               <label class="col-2 col-form-label">@L("WebhookEvents")</label>
                               <div class="col-10 text-break">
                                   @if (Model.Webhooks != null)
                                   {
                                       @foreach (var webhookEvent in Model.Webhooks)
                                       {
                                           @webhookEvent
                                           <br/>
                                       }
                                   }
                               </div>
                           </div>
       
                           <div class="form-group row">
                               <label class="col-2 col-form-label">@L("AdditionalWebhookHeaders")</label>
                               <div class="col-10 text-break">
                                   @if (Model.Headers != null)
                                   {
                                       @foreach (var webhookHeader in Model.Headers)
                                       {
                                           @webhookHeader
                                           <br/>
                                       }
                                   }
                               </div>
                           </div>
       
                           <div class="form-group row mb-0">
                               <label class="col-2 col-form-label">@L("WebhookSecret")</label>
                               <div class="col-10 position-relative">
                                   <span class="blur" id="secretSpan">@Model.Secret</span>
                                   <div class="btn btn-sm btn-dark btn-elevate btn-elevate-air" id="secret-view-btn">@L("ViewWebhookSecret")</div>
                               </div>
                           </div>
                       </div>
                   </div>
                   <div class="card card-custom gutter-b">
                       <div class="card-header align-items-center border-0 mt-4">
                           <h3 class="card-title align-items-start flex-column">
                               <span class="font-weight-bolder text-dark">@L("WebhookSendAttempts")</span>
                           </h3>
                           <div class="card-toolbar">
                               <button id="refresh-send-attempts-btn" class="btn btn-outline-brand btn-sm btn-icon btn-icon-md">
                                   <i class="flaticon2-refresh"></i>
                               </button>
                           </div>
                       </div>
       
                       <div class="card-body">
                           <div class="align-items-center">
                               <table id="WebHookSendAttemptTable" class="display table table-separate table-head-custom no-footer dtr-inline dt-responsive nowrap">
                                   <thead>
                                   <tr>
                                       <th></th>
                                       <th style="text-align: center;width: 60px">@L("Actions")</th>
                                       <th>@L("WebhookEvent")</th>
                                       <th>@L("WebhookEventId")</th>
                                       <th>@L("CreationTime")</th>
                                       <th>@L("HttpStatusCode")</th>
                                       <th>@L("Response")</th>
                                       <th>@L("Data")</th>
                                   </tr>
                                   </thead>
                               </table>
                           </div>
                       </div>
                   </div>
    </div>
</div>
<div class="modal fade" id="SendAttemptDetailModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>